<template>
  <div>
    <el-container class="screening-box">
        <el-header class="screening-head">
          <div class="title">
            <i class="el-icon-search el-icon--left"></i>提报证书  <span style="font-weight:normal;padding-left: 30px">（商标注册证、检验检测结果、授权书、CCC证书)</span>
          </div>
        </el-header>
        <el-form style="margin-top: 20px" ref="form" :model="commitData" label-width="100px">
          <el-form-item label="文件：">
            <el-upload

              style="width: 300px"
              action="api/file/upload"
              ref="uploadControl"
              :multiple="false"
              :on-remove="uploadRemove"
              :before-upload="uploadBeforeUpload"
              :on-error="uploadError"
              :on-success="uploadSuccess"
              >
              <el-button icon="el-icon-upload2" >{{btnUploadVisible ? '上传文件' : '重新上传文件'}}</el-button>
            </el-upload>
            <p style="color: red;line-height: 1;margin-top:5px">只可以上传单个文件，多张图片请压缩后上传</p>
          </el-form-item>
          <el-form-item label="证书说明：">
            <el-input
              type="textarea"
              :file-list = "fileList"
              :autosize="{ minRows: 6, maxRows: 6 }"
              placeholder="请输入内容"
              v-model="commitData.illustration">
            </el-input>
            <p style="color: red;line-height: 1;margin-top:5px">请说明上传文件所属商品名称、证书类别等</p>
          </el-form-item>
          <el-form-item label="备注：">
             <el-input
              type="textarea"
              :autosize="{ minRows: 6, maxRows: 6 }"
              placeholder="请输入备注"
              v-model="commitData.remark">
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submit">确认提报</el-button>
          </el-form-item>
        </el-form>
    </el-container>
    <div class="table-box">
      <div class="table-title">
        <span class="title">
          <i class="el-icon-notebook-2 el-icon--left"></i>提报记录
        </span>
      </div>
      <el-table
        ref="multipleTable"
        :data="tableData"
        style="width: 100%"
        border
        :header-cell-style="tableHeaderColor"
        :cell-style="tableCellStyle"
      >
        <el-table-column prop="id" label="提报编号" width="110"></el-table-column>
        <el-table-column label="提报时间" width="200">
          <template slot-scope="scope">{{scope.row.createTime | dateFilter}}</template>
        </el-table-column>

        <el-table-column label="文件 （点击文件名下载）">
          <template slot-scope="scope">
            <el-link type="primary" :href="scope.row.fileUrl">{{scope.row.fileName}}</el-link>
          </template>
        </el-table-column>
        <el-table-column prop="illustration" label="证书说明" >
        </el-table-column>
        <el-table-column prop="remark" label="备注" width="150">
        </el-table-column>
      </el-table>
      <div class="table-handler">

        <div></div>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageInfo.startPage"
          :page-sizes="pageInfo.pageSizeArr"
          :page-size="pageInfo.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageInfo.total"
        ></el-pagination>
      </div>
    </div>

  </div>
</template>

<script>
import { useProjectCustomerSetting } from '@/hooks/project'
export default {
  name: 'Certificate',
  setup () {
    const { state: projectSetting } = useProjectCustomerSetting()
    return {
      projectSetting,
    }
  },
  data () {
    return {
      fileList: [],
      commitData: {
        file: {
          name: '',
          url: '',
        },
        illustration: '',
        remark: '',
      },

      btnUploadVisible: true,

      pageInfo: {
        total: 0,
        pageSizeArr: [10, 20, 30, 40],
        size: 10, // 分页页面数量大小
        startPage: 1, // 开始页码
      },

      pageSize: '10', // 每页条数
      startPage: '1', // 页码

      tableData: [],
      currentPage: 1,
      currentSize: 10,
      pageSizeArr: [10, 20, 30, 40],
      totalSize: 0,
    }
  },
  computed: {},

  methods: {

    uploadRemove (file, fileList) {
      this.commitData.file.name = ''
      this.commitData.file.url = ''
      this.btnUploadVisible = true
    },
    uploadBeforeUpload (file) {
      console.log('file', file)
      try {
        // let last = file.name.substring(file.name.length - 3, file.name.length)
        // last = last.toLowerCase()
        // if(last != 'rar'){
        //     this.$message.error('文件类型错误')
        //     return false;
        // }
        // 文件大小
        let size = file.size
        size = size / 1024 / 1024
        if (size > 20) {
          this.$message.error('文件大小不允许超过20M')
          return false
        }
        this.commitData.file.name = file.name
        this.commitData.file.url = ''
        this.btnUploadVisible = false
        return true
      } catch (e) {
        this.$message.error('选择文件错误')
        return false
      }
    },
    uploadSuccess (response, file, fileList) {
      if (fileList.length > 1) {
        fileList.splice(0, 1)
      }
      console.log('response', response)
      if (response.success) {
        this.commitData.file.url = response.result
        this.commitData.file.name = file.name
        this.$message.success('上传成功')
      } else {
        if (response.code === '00001') {
          location.reload()
        } else {
          this.$message.error('上传失败:' + response.desc)
          this.commitData.file.name = ''
          this.commitData.file.url = ''
          this.$refs.uploadControl.clearFiles()
          this.btnUploadVisible = true
        }
      }
    },
    uploadError (response, file, fileList) {
      this.$message.error('上传失败！')
      this.commitData.file.name = ''
      this.commitData.file.url = ''
      this.$refs.uploadControl.clearFiles()
      this.btnUploadVisible = true
    },
    uploadExceed (files, fileList) {
      this.$message.error('只能上传一个文件！')
    },

    submit () {
      if (!this.commitData.file.name || !this.commitData.file.url ||
              this.commitData.file.name.length <= 0 || this.commitData.file.url.length <= 0) {
        this.$message.error('请选择需要上传的文件')
        return
      }
      if (!this.commitData.illustration || this.commitData.illustration.length <= 0) {
        this.$message.error('请填写证书说明')
        return
      }

      this.$axios.post(
        '/api/qualification/add', {
          fileName: this.commitData.file.name,
          fileUrl: this.commitData.file.url,
          illustration: this.commitData.illustration,
          remark: this.commitData.remark,
          projectId: this.projectSetting.projectId,
        },
      )
        .then(res => {
          if (res.success) {
            this.$refs.uploadControl.clearFiles()
            this.btnUploadVisible = true
            this.commitData.illustration = ''
            this.commitData.remark = ''
            this.$message.success('添加成功')
            this.showList()
          } else this.$message.error(res.desc)
        })
    },

    showList () {
      console.log('showList')
      this.$axios.post(
              `/api/qualification/getList?size=${this.pageInfo.size}&startPage=${this.pageInfo.startPage}`, { projectId: this.projectSetting.projectId },
      )
        .then(res => {
          if (res.success) {
            this.pageInfo.total = res.result.total
            this.pageInfo.size = res.result.pageSize
            this.tableData = res.result.list
          } else this.$message.error(res.desc)
        })
    },
    // 分页数量大小设置
    handleSizeChange (val) {
      this.pageInfo.size = val
      this.pageInfo.startPage = 1
      this.showList()
    },
    // 分页当前页设置
    handleCurrentChange (val) {
      this.pageInfo.startPage = val
      this.showList()
    },
    // 修改table header的背景色
    tableHeaderColor ({ row, column, rowIndex, columnIndex }) {
      return 'background-color: #f5f5f5;color: #333;font-weight: bold;text-align:center'
    },
    // 修改table tr行的样式
    tableCellStyle ({ row, column, rowIndex, columnIndex }) {
      return 'text-align:center'
    },
    /**
     * 全选切换
     */
    toggleSelection () {
      if (this.checkAll) {
        this.tableData.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row, this.checkAll)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },
    /**
     * 再次报备
     */
    reFiling (id) {
      this.$router.push({ path: 'AddFiling', query: { id: id, type: 'again' } })
    },
  },
  created () {
    this.showList()
  },
  watch: {
    'projectSetting.projectId' () {
      this.showList()
    },
  },
}
</script>

<style lang="less" scoped>
.title {
  font-weight: bold;
}
.grey {
  color: #bbb;
}
.red {
  color: red;
}
.screening-box {
  border: 1px solid #ddd;
  .searchForm {
    width: 100%;
  }
}
.screening-head {
  background: #f5f5f5;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .toggle {
    cursor: pointer;
    margin-right: 50px;
  }
}
.screening-body {
  border-top: 1px solid #ddd;
}
.btn-box {
  margin-top: 40px;
  .number {
    color: red;
  }
  .el-button--primary {
    .number {
      color: #fff;
    }
  }
}
.table-title {
  height: 47px;
  line-height: 47px;
  padding: 0 15px;
  background-color: #f5f5f5;
  border-bottom: 1px solid #ddd;
}
.table-box {
  border: 1px solid #ddd;
  margin-top: 10px;
}
.table-handler {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 15px;
  .check-all {
    margin-right: 20px;
  }
}
.hasEdit {
  position: absolute;
  top: 0;
  left: 0;
  &::before {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-top: 30px solid red;
    border-right: 30px solid transparent;
  }
  .text {
    position: absolute;
    top: -3px;
    left: 2px;
    color: #fff;
    font-size: 12px;
  }
}
</style>
